// 公司新闻
<template>
  <div class="news">
    <h3>{{}}</h3>

    <ul>
      <li v-for="(item,index) in news" :key="index" @click="jumpDetails(index)">
        <img :src="item.imgsrc">
        <div>
          <h4>{{ item.title }}</h4>
          <p>{{ item.des }}</p>
          <bdi>{{ item.time }}</bdi>
        </div>
      </li>
    </ul>

    <el-pagination background layout="prev, pager, next" :total="80" :page-size="8"></el-pagination>
  </div>
</template>
<script>
export default {
  name: "companyNews",

  data() {
    return {
      news: [
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538813567&di=31ea2dd5f3dc57ccac38ab77e99ac755&imgtype=jpg&er=1&src=http%3A%2F%2Fshp.qpic.cn%2Fqqvideo_ori%2F0%2Fg0775behqom_496_280%2F0",
          title: "特别报道 | 孚地卖场南京站发生这些重磅大事",
          des:
            "2018年9月12日，长春新区领导及日本外商团一行专程来到吉林文德孚科技有限公司进行实地考察洽谈，马国辉总经理亲自陪同参观并进行细致的讲解，",
          time: "2018-04-02  12:36:21",
          id: 0
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538813567&di=31ea2dd5f3dc57ccac38ab77e99ac755&imgtype=jpg&er=1&src=http%3A%2F%2Fshp.qpic.cn%2Fqqvideo_ori%2F0%2Fg0775behqom_496_280%2F0",
          title: "特别报道 | 孚地卖场南京站发生这些重磅大事",
          des:
            "2018年9月12日，长春新区领导及日本外商团一行专程来到吉林文德孚科技有限公司进行实地考察洽谈，马国辉总经理亲自陪同参观并进行细致的讲解，",
          time: "2018-04-02  12:36:21",
          id: 1
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538813567&di=31ea2dd5f3dc57ccac38ab77e99ac755&imgtype=jpg&er=1&src=http%3A%2F%2Fshp.qpic.cn%2Fqqvideo_ori%2F0%2Fg0775behqom_496_280%2F0",
          title: "特别报道 | 孚地卖场南京站发生这些重磅大事",
          des:
            "2018年9月12日，长春新区领导及日本外商团一行专程来到吉林文德孚科技有限公司进行实地考察洽谈，马国辉总经理亲自陪同参观并进行细致的讲解，",
          time: "2018-04-02  12:36:21",
          id: 2
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538813567&di=31ea2dd5f3dc57ccac38ab77e99ac755&imgtype=jpg&er=1&src=http%3A%2F%2Fshp.qpic.cn%2Fqqvideo_ori%2F0%2Fg0775behqom_496_280%2F0",
          title: "特别报道 | 孚地卖场南京站发生这些重磅大事",
          des:
            "2018年9月12日，长春新区领导及日本外商团一行专程来到吉林文德孚科技有限公司进行实地考察洽谈，马国辉总经理亲自陪同参观并进行细致的讲解，",
          time: "2018-04-02  12:36:21",
          id: 3
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538813567&di=31ea2dd5f3dc57ccac38ab77e99ac755&imgtype=jpg&er=1&src=http%3A%2F%2Fshp.qpic.cn%2Fqqvideo_ori%2F0%2Fg0775behqom_496_280%2F0",
          title: "特别报道 | 孚地卖场南京站发生这些重磅大事",
          des:
            "2018年9月12日，长春新区领导及日本外商团一行专程来到吉林文德孚科技有限公司进行实地考察洽谈，马国辉总经理亲自陪同参观并进行细致的讲解，",
          time: "2018-04-02  12:36:21",
          id: 4
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538813567&di=31ea2dd5f3dc57ccac38ab77e99ac755&imgtype=jpg&er=1&src=http%3A%2F%2Fshp.qpic.cn%2Fqqvideo_ori%2F0%2Fg0775behqom_496_280%2F0",
          title: "特别报道 | 孚地卖场南京站发生这些重磅大事",
          des:
            "2018年9月12日，长春新区领导及日本外商团一行专程来到吉林文德孚科技有限公司进行实地考察洽谈，马国辉总经理亲自陪同参观并进行细致的讲解，",
          time: "2018-04-02  12:36:21",
          id: 5
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538813567&di=31ea2dd5f3dc57ccac38ab77e99ac755&imgtype=jpg&er=1&src=http%3A%2F%2Fshp.qpic.cn%2Fqqvideo_ori%2F0%2Fg0775behqom_496_280%2F0",
          title: "特别报道 | 孚地卖场南京站发生这些重磅大事",
          des:
            "2018年9月12日，长春新区领导及日本外商团一行专程来到吉林文德孚科技有限公司进行实地考察洽谈，马国辉总经理亲自陪同参观并进行细致的讲解，",
          time: "2018-04-02  12:36:21",
          id: 6
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538813567&di=31ea2dd5f3dc57ccac38ab77e99ac755&imgtype=jpg&er=1&src=http%3A%2F%2Fshp.qpic.cn%2Fqqvideo_ori%2F0%2Fg0775behqom_496_280%2F0",
          title: "特别报道 | 孚地卖场南京站发生这些重磅大事",
          des:
            "2018年9月12日，长春新区领导及日本外商团一行专程来到吉林文德孚科技有限公司进行实地考察洽谈，马国辉总经理亲自陪同参观并进行细致的讲解，",
          time: "2018-04-02  12:36:21",
          id: 7
        }
      ]
    }
  },

  methods: {
    jumpDetails(index) {
      this.$emit("lists", [index, 1])
    }
  }
}
</script>
<style lang="scss" scoped>
.news {
  width: 966px;
  .el-pagination {
    margin-top: 30px;
    text-align: center;
  }
  h3 {
    line-height: 46px;
    background: #f9f9f9;
    text-indent: 27px;
    border-left: #0a83e7 4px solid;
    letter-spacing: 2px;
  }
  ul {
    padding-top: 15px;
    li {
      width: 926px;
      margin: auto;
      border-bottom: 1px dashed #d0d0d0;
      display: flex;
      flex-direction: row;
      align-items: center;
      line-height: 44px;
      cursor: pointer;
      &:hover {
        background: rgba($color: #baddf5, $alpha: 0.1);
      }
      img {
        width: 212px;
        height: 158px;
        padding: 27px 0px;
        padding-right: 20px;
      }
      div {
        padding: 27px 0px;
        p {
          line-height: 24px;
          text-indent: 28px;
          font-size: 14px;
          color: #717171;
        }
        bdi {
          color: #bfbfbf;
        }
      }
    }
  }
}
</style>

